<template>
  <div>
        <el-row style="border:0px; padding-left:20px" :gutter="10">
          <el-col style="border:0px;"  v-if="openType == 'edit' || openType == 'add'"  :span="4">
            <el-button type="primary" @click="openFileDialog('select')">选择文件</el-button>
          </el-col>
          <el-col style="border:0px;"  :span="19">
            <el-row  style="border:0px;padding:0px; margin:0px" v-for="file in fileList" :key="file">
              <el-col style='border:0px;cursor:pointer' :span="18">
                  <svg-icon v-if="file.fileType == 'xlsx' || file.fileType == 'xls'" iconClass="excel"/>
                  <svg-icon v-else-if="file.fileType == 'pptx' || file.fileType == 'ppt'" iconClass="ppt"/>
                  <svg-icon v-else-if="file.fileType == 'pdf'" iconClass="pdf"/>
                  <svg-icon v-else-if="file.fileType == 'docx' || file.fileType == 'doc'" iconClass="word"/>
                  <svg-icon v-else-if="file.fileType == 'txt'" iconClass="txt"/>
                  <el-image v-else-if="file.fileType == 'png' || file.fileType == 'bmp' || file.fileType == 'gif' || file.fileType == 'jpg' || file.fileType == 'jpeg'"
                    style="border-radius:5px; padding:5px 5px 0 0;width: 30px; height: 30px"
                    :src="'/'+file.filePath" 
                    :preview-src-list="['/'+file.filePath]">
                  </el-image>
                  <svg-icon v-else iconClass="unknown"/> 
                  <span  @click="openFile(file)"> {{file.fileName}} </span>
              </el-col>
              <el-col style="border:0px;"  :span="6" >
                <el-button icon="el-icon-download" type="text" @click="openFileDialog('save',file)">另存为</el-button>&nbsp;
                <el-button icon="el-icon-delete"  v-if="openType == 'edit' || openType == 'add'" type="text" @click="removeFile(file)">移除</el-button>
              </el-col>
            </el-row>
          </el-col>
    </el-row> 
    <!-- 
    文件选择对话框
    -->
    <el-dialog title="选择文件" width="90%" top="0vh" :close-on-click-modal='false' :modal='false' :visible.sync="fileSelectDialog">
      <file-dialog
        ref="fileSelectorDialog"
        :mode="mode"
        :fileInfo="fileInfo"
        @handleAddFile="handleAddFile"
        @closeFileDialog="closeFileDialog"
        >
      </file-dialog>
    </el-dialog>
  </div>
</template>

<script>
import FileDialog from '@/views/general/file/generalFileInfoSelectorDialog.vue'
import {mapGetters} from 'vuex';
import {getToken} from '@/util/auth'
import {Base64} from 'js-base64';

export default {
  props: {
    fileList: {
      type: Object
    },
    openType:{
      type: String
    },
    multiple: {
      type: Boolean
    },
  },
  components: {
    FileDialog
  },
  data() {
    return {
      //文件选择器：
      fileSelectDialog: false,

      //mode 1-select 2-save
      mode: '',
      fileInfo: ''
    };
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission'])
  },
  methods: { 
    /**
     * 另存为成功 关闭对话框
     */
    closeFileDialog(mode,fileInfo){
      this.fileSelectDialog =  false;
    },
    /**
     * 打开文件选择对话框
     */
    openFileDialog(mode,fileInfo){
      if(mode == 'save'){
        this.fileInfo =  fileInfo;
      }
      this.mode = mode;
      this.fileSelectDialog =  true;
    },
    /**
     * 添加文件到控件
     */
    handleAddFile(files){
      this.fileList=[];
      files.forEach(element => {
        this.fileList.push({
          fileName:element.fileName,
          fileId:element.id,
          filePath:element.filePath,
          fileType:element.fileType,
          fileSize:element.fileSize
        });
      });
      if(!this.multiple && this.fileList.length > 1){
        this.$message({
          customClass:'zZindex',
          type: 'warning',
          message: '只支持选择一个文件!',
        });
        this.fileList = [];
        this.fileList.push({
          fileName: files[0].fileName,
          fileId: files[0].id,
          filePath:files[0].filePath,
          fileType:files[0].fileType,
          fileSize:files[0].fileSize
        });
      }
      this.fileSelectDialog =  false;
      //修改父组件的文件列表值
      this.$emit('changeFileList', this.fileList)
    },
    /**
     * 移除文件
     */
    removeFile(file){
      let newFileList = [];
      this.fileList.forEach(element => {
        if(element.fileId != file.fileId){
          newFileList.push(element);
        }
      });
      this.fileList = newFileList;
      //修改父组件的文件列表值
      this.$emit('changeFileList', this.fileList)
    },
    /**
     * 打开文件预览
     */   
    openFile(file){
      if(file.fileType == 'ppt' || file.fileType == 'pptx' || file.fileType == 'doc'  || file.fileType == 'docx'  || file.fileType == 'xls' || file.fileType == 'xlsx'  || file.fileType == 'pdf'){
      }
      else if(file.fileType == 'png' || file.fileType == 'jpeg' || file.fileType == 'jpg' || file.fileType == 'gif' || file.fileType == 'bmp') {
        this.$message({
          customClass:'zZindex',
          type: 'warning',
          message: '请直接点击小图片放大!',
        });
        return false;
      }
      let openUrl= 'id='+Base64.encode(file.fileId)+'&tenantId='+Base64.encode(this.userInfo.tenantId)+'&UID='+Base64.encode(this.userInfo.userId)+'&remote=no&UserSign=uploadFile&token='+getToken()+'&mode=view&history='+Base64.encode(file.filePath);
      window.open('/file/office/index?'+openUrl+'&sign='+this.$toolUtil.encodeMd5(openUrl), '_blank'); 
    }
  },
  created() {
  },
  mounted() {
   
  },
};
</script>
<style>
</style>
